import QtQuick 2.5

Item {
    id:root
    width: parent.width
    height:parent.height

    // bnts index tip
    property int cindex:0

    //control panel source
    property var controlSource:[
        "qrc:/UI/Control/LightControl.qml",
        "qrc:/UI/Control/FanControl.qml",
        "qrc:/UI/Control/AirconditionerControl.qml",
        "qrc:/UI/Control/CurtainControl.qml"
    ]

    //bttom bnts list data
    ListModel{
        id:bntsModel
        ListElement{
            selectedImgSrc:"qrc:/imgs/control/smartHomeIcons/control/bnt_light_selected.png"
            unselectedImgSrc:"qrc:/imgs/control/smartHomeIcons/control/bnt_light_unselected.png"
            selected:true
        }
        ListElement{
            selectedImgSrc:"qrc:/imgs/control/smartHomeIcons/control/bnt_fan_selected.png"
            unselectedImgSrc:"qrc:/imgs/control/smartHomeIcons/control/bnt_fan_unselected.png"
            selected:false
        }
        ListElement{
            selectedImgSrc:"qrc:/imgs/control/smartHomeIcons/control/bnt_aircondition_selected.png"
            unselectedImgSrc:"qrc:/imgs/control/smartHomeIcons/control/bnt_aircondition_unselected.png"
            selected:false
        }
        ListElement{
            selectedImgSrc:"qrc:/imgs/control/smartHomeIcons/control/bnt_curtain_selected.png"
            unselectedImgSrc:"qrc:/imgs/control/smartHomeIcons/control/bnt_curtain_unselected.png"
            selected:false
        }
    }

    //bg
    Image {
        id: bg
        anchors.fill: parent
        source: "qrc:/imgs/control/smartHomeIcons/control/bg.png"
    }

    //child page loader
    Loader{
        id:loader
        width: parent.width
        height:parent.height-topbar.height-bottombar.height
        anchors.bottom: bottombar.top
        source:"qrc:/UI/Control/LightControl.qml"
    }

    //top bar
    Image {
        id: topbar
        source: "qrc:/imgs/control/smartHomeIcons/control/top_bar.png"
        width:parent.width
        height: 60*Device.dentisty

        Image {
            id: scanBnt
            source: "qrc:/imgs/control/smartHomeIcons/control/bnt_qr_scanner.png"
            width: 40*Device.dentisty
            height:width
            anchors.centerIn: parent
        }
    }

    //bottom bar
    Image {
        id: bottombar
        source: "qrc:/imgs/control/smartHomeIcons/control/bottom_bar.png"
        width: parent.width
        height: 60*Device.dentisty
        anchors.bottom: parent.bottom
        Row{
            anchors.centerIn: parent
            spacing: (parent.width-bntsModel.count*40*Device.dentisty)/(bntsModel.count+1)
            Repeater{
                model: bntsModel
                delegate: Image {
                    id: bnt
                    source: selected?selectedImgSrc:unselectedImgSrc
                    width: 40*Device.dentisty
                    height: width
                    MouseArea{
                        anchors.fill: parent
                        onClicked: {
                            cindex=index;
                            for(var a=0;a<bntsModel.count;a++){
                                if(a===cindex)
                                    bntsModel.setProperty(a,"selected",true);
                                else
                                    bntsModel.setProperty(a,"selected",false);
                            }
                            loader.source=controlSource[index];
                        }
                    }
                }
            }
        }
    }



}
